<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/aui.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/init.js"></script>
    <title>项目列表</title>

</head>
<body>
<header>
    <div class="f1"></div>
    <div class="f1">项目列表</div>
    <div class="f1"></div>
</header>
<section class="bg-gray">
    <div class="pad-3">
        <div id="circuit">
            <ul id="eth" class="flex flex-r-w center">

            </ul>
            <ul id="etc" class="flex flex-r-w center">

            </ul>
        </div>


        <ul id="zclist" class="mar-t-5">
            <!--<li class="border-gray border-radius-1 hidden mar-b-3">
                <div class="bg-gray-l border-b-gray pad-2-3 flex">
                    <p class="f1" > </p>
                    <a href="zhongchouDetail.html" class="pad-1-2 bg-yellow color-white font25 border-radius-1">点击查看</a>
                </div>
                <div class="bg-white pad-3 color-gray line-h-2">
                    <p>目标：0.00</p>
                    <div class="flex">
                        进度：
                        <div class="progress f1">
                            <p></p>
                        </div>
                        <p class="f1 pad-l-2">0%</p>
                    </div>
                    <div>
                        状态：<span class="pad-1-2 bg-yellow color-white font25 border-radius-1">等待中</span>
                    </div>
                    <p>启动倒计时： 00小时00分00秒</p>
                </div>
            </li>-->


        </ul>
    </div>

</section>
<footer>
    <a href="index.html" class="f1">
        <img src="img/foot1.png" alt="">
        <p>主页</p>
    </a>
    <a href="#" class="f1 active">
        <img src="img/foot2.png" alt="">
        <p>众筹中心</p>
    </a>
    <a href="news.html" class="f1">
        <img src="img/foot3.png" alt="">
        <p>资讯</p>
    </a>
    <a href="my.html" class="f1">
        <img src="img/foot4.png" alt="">
        <p>个人</p>
    </a>
</footer>

<script>
    // 线路列表
    var data;
    new AjaxRequest({
        type: 'post',
        dataType: 'json',
        url: hostUrl + 'index/Circuit/index',
        data: data,
        callback: res => {
            if(res.status == 1){
                var ETH = res.data.ETH;
                var ETC = res.data.ETC;
                function circuitload(type) {
                    var item = '';
                    for(var i=0;i<type.length;i++){
                        item += '<li class="col-25 bg-white pad-t-b-2 border-gray" data-id="'+type[i].id+'">'+type[i].circuit_name+'</li>';
                    }
                    return item;
                }
                $("#eth").html(circuitload(ETH));
                $("#etc").html(circuitload(ETC));

            }

        }
    });

    // 众筹列表
    var data, page;
    new AjaxRequest({
        type: 'post',
        data: data,
        dataType: 'json',
        url: hostUrl + 'index/Crowdfound/index',
        callback: res => {
            var list = '';
            var opentime, overtime;
            if(res.status == 1){
                page = res.data;
                for (var i=0;i<res.data.length;i++){

                    list += '<li class="border-gray border-radius-1 hidden mar-b-3"><div class="bg-gray-l border-b-gray pad-2-3 flex"><p class="f1" >'+res.data[i].circuit_name+'第'+res.data[i].periods_no+'期</p>';

                    if(res.data[i].status == 2){
                        list += '<a href="zhongchouDetail.html?periods_id='+res.data[i].id+'&isbuy=1" class="pad-1-2 bg-blue color-white font25 border-radius-1" >点击抢购</a>';
                    }else{
                        list += '<a href="zhongchouDetail.html?periods_id='+res.data[i].id+'&isbuy=2" class="pad-1-2 bg-yellow color-white font25 border-radius-1">点击查看</a>';
                    }
                    list +='</div><div class="bg-white pad-3 color-gray line-h-2"><p>目标：'+res.data[i].permoney+'</p><div class="flex">进度：<div class="progress f1" data-bl="'+res.data[i].bl+'"><p style="width: '+res.data[i].bl+'%"></p></div><p class="f1 pad-l-2">'+res.data[i].bl+'%</p></div><div>状态：';
                    // list += res.data[i]==1?'等待中':res.data[i]==2?'进行中':res.data[i]==3?'已完成':'已结束';
                    if(res.data[i].status == 1){
                        list += '<span class="pad-1-2 bg-yellow color-white font25 border-radius-1">等待中</span></div>';
                    }
                    if(res.data[i].status == 2){
                        list += '<span class="pad-1-2 bg-blue color-white font25 border-radius-1">进行中</span></div>';
                    }
                    if(res.data[i].status == 3){
                        list += '<span class="pad-1-2 bg-yellow color-white font25 border-radius-1">已完成</span></div>';
                    }
                    if(res.data[i].status == 4){
                        list += '<span class="pad-1-2 bg-red color-white font25 border-radius-1">崩盘</span></div>';
                    }
                    if(res.data[i].status == 5){
                        list += '<span class="pad-1-2 bg-red color-white font25 border-radius-1">销毁</span></div>';
                    }
                    if(res.data[i].status == 6){
                        list += '<span class="pad-1-2 bg-red color-white font25 border-radius-1">已结束</span></div>';
                    }

                    if(res.data[i].status == 1){
                        opentime = res.data[i].open_time;
                        list += '<p >启动倒计时：<span data-id="'+res.data[i].status+'" data-time="'+opentime+'">'+backtime(opentime)+'</span></p>';

                    }
                    if(res.data[i].status == 2){
                        overtime = res.data[i].over_time;
                        list += '<p >结束倒计时：<span data-id="'+res.data[i].status+'" data-time="'+overtime+'">'+backtime(overtime)+'</span></p>';
                    }
                    list += '</div></li>';

                }

                $("#zclist").html(list);

                var allspan = $("#zclist >li span");
                setInterval(function () {
                    for(var i=0;i<allspan.length;i++){
                        var dataid = allspan.eq(i).attr('data-id');
                        var datatime = allspan.eq(i).attr("data-time");
                        if(dataid==1){
                            eval('var time'+i+'=datatime');
                            eval('var ff'+i+'=allspan.eq(i)');
                            eval('ff'+i+'.text( backtime(time'+i+'))');
                        }
                        if(dataid==2){
                            eval('var time'+i+'=datatime');
                            eval('var ff'+i+'=allspan.eq(i)');
                            eval('ff'+i+'.text( backtime(time'+i+'))');
                        }
                    }
                },1000);

            }

        }
    });
    // 时间戳倒计时
    function backtime(now) {
        var a = now - (new Date().getTime()/1000).toFixed(0);
        if(a > 0){
            var hour = Math.floor(a/3600);
            var min = Math.floor((a-hour*3600)/60);
            var sec = Math.floor(a % 60);
            var con = hour +'小时'+ min +'分'+ sec + '秒';
            return con;
        }else{
            return 0;
        }
    }

    $(document).on("click","#circuit li",function () {
        $("#circuit li").removeClass('bg-blue color-white');
        $(this).addClass('bg-blue color-white');
        var type = $(this).attr('data-id');
        var list = '';
        var opentime, overtime;
        for (var i=0;i<page.length;i++){

            if(page[i].circuit_id == type){
                list += '<li class="border-gray border-radius-1 hidden mar-b-3"><div class="bg-gray-l border-b-gray pad-2-3 flex"><p class="f1" >'+page[i].circuit_name+'第'+page[i].periods_no+'期</p>';

                if(page[i].status == 2){
                    list += '<a href="zhongchouDetail.html?periods_id='+page[i].id+'&isbuy=1" class="pad-1-2 bg-blue color-white font25 border-radius-1" >点击抢购</a>';
                }else{
                    list += '<a href="zhongchouDetail.html?periods_id='+page[i].id+'&isbuy=2" class="pad-1-2 bg-yellow color-white font25 border-radius-1">点击查看</a>';
                }
                list +='</div><div class="bg-white pad-3 color-gray line-h-2"><p>目标：'+page[i].permoney+'</p><div class="flex">进度：<div class="progress f1" data-bl="'+page[i].bl+'"><p style="width: '+page[i].bl+'%"></p></div><p class="f1 pad-l-2">'+page[i].bl+'%</p></div><div>状态：';
                // list += page[i]==1?'等待中':page[i]==2?'进行中':page[i]==3?'已完成':'已结束';
                if(page[i].status == 1){
                    list += '<span class="pad-1-2 bg-yellow color-white font25 border-radius-1">等待中</span></div>';
                }
                if(page[i].status == 2){
                    list += '<span class="pad-1-2 bg-blue color-white font25 border-radius-1">进行中</span></div>';
                }
                if(page[i].status == 3){
                    list += '<span class="pad-1-2 bg-yellow color-white font25 border-radius-1">已完成</span></div>';
                }
                if(page[i].status == 4){
                    list += '<span class="pad-1-2 bg-red color-white font25 border-radius-1">崩盘</span></div>';
                }
                if(page[i].status == 5){
                    list += '<span class="pad-1-2 bg-red color-white font25 border-radius-1">销毁</span></div>';
                }
                if(page[i].status == 6){
                    list += '<span class="pad-1-2 bg-red color-white font25 border-radius-1">已结束</span></div>';
                }

                if(page[i].status == 1){
                    opentime = page[i].open_time;
                    list += '<p >启动倒计时：<span data-id="'+page[i].status+'" data-time="'+opentime+'">'+backtime(opentime)+'</span></p>';

                }
                if(page[i].status == 2){
                    overtime = page[i].over_time;
                    list += '<p >结束倒计时：<span data-id="'+page[i].status+'" data-time="'+overtime+'">'+backtime(overtime)+'</span></p>';
                }
                list += '</div></li>';
            }
        }
        $("#zclist").html(list);
    });

</script>


</body>
</html>